<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<link href="<c:url value="/resources/css/fullcalendar/fullcalendar.css"/>"
	rel="stylesheet">
<link href="<c:url value="/resources/css/fullcalendar_external.css"/>"
	rel="stylesheet">
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery/jquery-1.7.2.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/fullcalendar/fullcalendar.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery/jquery-ui-1.8.17.custom.min.js"/>"></script>

<spring:url var="consultaClientesUrl" value="/cliente/visita/{id}">
	<spring:param name="id" value="${usuarioId}"/>
</spring:url>
<script type="text/javascript">

$(document).ready(function() {
	
	$('#external-events div.external-event').each(function() {		
		var eventObject = {
			title: $.trim($(this).text()) // use the element's text as the event title
		};		
		$(this).data('eventObject', eventObject);
		
		$(this).draggable({
			zIndex: 999,
			revert: true,      // will cause the event to go back to its
			revertDuration: 0  //  original position after the drag
		});
		
	});

	$.getJSON('${consultaClientesUrl}', function (data) {
    	calendar = $('#calendar').fullCalendar({    
    	header: {
            left: 'prev,next,today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
        dayNamesShort: ['DOM','LUN','MAR','MIE','JUE','VIE','SAB'],
        buttonText: {prev: '&nbsp;&#9668;&nbsp;',
    		next: '&nbsp;&#9658;&nbsp;',
    		prevYear: '&nbsp;&lt;&lt;&nbsp;',
    		nextYear: '&nbsp;&gt;&gt;&nbsp;',
            today : 'Hoy',
            month:  'Mes',
            week:   'Semana',
            day:    'Dia'
        },        
        eventRender: function(event, element) {
        },
        eventAfterRender: function(event, element, view) {
            if(event.est==1){
                element.css('background', '#378006');
            }
        },       
        editable: true,        
        height: 580,
        timeFormat: 'hh:mm{ - h:mm}',
        ignoreTimezone: true,
        events:data,
        droppable: true,
        drop: function(date, allDay) { 
			var originalEventObject = $(this).data('eventObject');
			var copiedEventObject = $.extend({}, originalEventObject);
			copiedEventObject.start = date;
			copiedEventObject.allDay = false;
			$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);			
			if ($('#drop-remove').is(':checked')) {
					$(this).remove();
				}
		},
        eventMouseover: function(event,jsEvent) {
            var tPosX = jsEvent.pageX - 5 ;
            var tPosY = jsEvent.pageY + 20 ;
            $('#tooltip').css({top: tPosY, left: tPosX, display: 'block'});
            var tt = '';
            tt += '<u>' +event.title+'</u><br></br>';
            tt += '<b>D&eacute;scription: </b> ' +event.title+'<br></br>';
            tt += '<b>D&eacute;but: </b> ' +
            	$.fullCalendar.formatDate(event.start, "yyyy-M-d H:mm tt")
                +'<br />';
            $('#tooltip').html(tt);
           },
           eventMouseout: function() {
            $('#tooltip').css({display: 'none'});
           },

           loading: function(bool) {
            if (bool) {
                $('#loading').show();
                
            }else{
             $('#loading').hide();
            }
           }
        
	    });
	});
 });
</script>
<div id='calendar'></div>
<div id="tooltip" style="position:absolute;
	display:none;background-color:white;padding:5px;z-index:50; text-align:left;" >
</div>